import React, {useState} from 'react';
import {Tab, TabPanel, Tabs} from "react-ui-xmui";

const TabDemo1 = () => {
  const [value, setValue] = useState(0)
  const handleOnChange = (event, newValue) => {
    setValue(newValue)
  }

  return (
    <div style={{width:'600px'}}>
      <Tabs onTabsChange={handleOnChange} value={value}>
        <Tab label={'tab1'} value={0} key={0}/>
        <Tab label={'tab2'} value={1} key={1}/>
        <Tab label={'tab3'} value={2} key={2}/>
      </Tabs>
      <div>
        <TabPanel index={0} value={value}>
          tab1
        </TabPanel>
        <TabPanel index={1} value={value}>
          tab2
        </TabPanel><TabPanel index={2} value={value}>
        tab3
      </TabPanel>
      </div>
    </div>
  )
};

export default TabDemo1;